<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>圆角</title>
	<style type="text/css">
		div {
			position: relative;
			width: 500px;
			height: 300px;
			border:1px solid black;
			-webkit-border-radius:50%;
			   -moz-border-radius:50%;
			    -ms-border-radius:50%;
			     -o-border-radius:50%;
			        border-radius:50%;
			font-size: 24px;
			font-weight: bold;
			text-align: center;
			line-height: 300px;
		}
		div::before,div::after {
			position: absolute;
			content: "";
			width: 50px;
			height: 50px;
			display: block;
			border: 1px solid black;
			-webkit-border-radius:50%;
			   -moz-border-radius:50%;
			    -ms-border-radius:50%;
			     -o-border-radius:50%;
			        border-radius:50%; 
		}
		div::before {
			width: 50px;
			height: 50px;
			bottom: -25px;
			right: 25px;
		}
		div::after {
			width: 20px;
			height: 20px;
			bottom: -75px;
			right: 0px;
		}

	</style>
</head>
<body>
	<div>大家好，欢迎来到慕课网！</div>
</body>
</html>